<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
            line-height: 40px;
        }

        .title {
            line-height: 40px;
        }

        .list li {
            border: 1px dashed #333;
            text-indent: 10px;
            height: 40px;
        }
    </style>
</head>

<body>
    <h3 id="title">模拟封装jquery</h3>
    <input class="inp" type="text">
    <div class="list">
        <li>li_01</li>
        <li>li_02</li>
        <li>li_03</li>
        <li>li_04</li>
        <li>li_05</li>
        <li>li_06</li>
        <li>li_07</li>
        <li>li_08</li>
        <li>li_09</li>
        <li>li_10</li>
    </div>
</body>
<script>
    // jquery  原生js封装的一个库,快速获取元素,操作元素  (dom的增删改查,事件,ajax,运动)

    // 面向过程
    // 获取操作元素
    // 单元素  直接操作
    var h3 = document.getElementById("title");
    h3.innerText = "hello";

    // 多元素  遍历操作
    var liList = document.querySelectorAll(".list li");
    for (var i = 0; i < liList.length; i++) {
        var ele = liList[i];
        ele.textContent = "world";
    }

    //  单元素,和多元素操作流程不统一,所以 把获取的元素统一存放到集合中 
    // document.querySelectorAll()   多元素获取,即便只有一个也会放到集合中
    var eles = document.querySelectorAll("#title");


    var eles = document.querySelectorAll(".list li");
    for (var i = 0; i < eles.length; i++) {
        var ele = eles[i];
        ele.textContent = "hello";
    }


    var eles = document.querySelectorAll(".list li");
    function setHtml(con) {
        for (var i = 0; i < eles.length; i++) {
            var ele = eles[i];
            ele.textContent = con;
        }
    }
    function getHtml() {
        var arr = [];
        for (var i = 0; i < eles.length; i++) {
            var ele = eles[i];
            arr.push(ele.textContent)
        }
        return arr;

        //  默认返回集合中的第一个 (为了模拟jquery)
        return eles[0].textContent;
    }

    // setHtml("123123");


    var getEle = {
        eles: document.querySelectorAll(".list li"),
        // setHtml: function (con) {
        //     for (var i = 0; i < this.eles.length; i++) {
        //         var ele = this.eles[i];
        //         ele.textContent = con;
        //     }
        // },
        // getHtml: function () {
        //     // 默认返回集合中的第一个(为了模拟jquery)
        //     return this.eles[0].textContent;
        // },
        // 获取和设置匹配元素的html结构
        // html(123313)  有参数,就设置
        // html()        没有参数,就获取
        html: function (con) {
            if (arguments.length >= 1) {  // 有参数
                for (var i = 0; i < this.eles.length; i++) {
                    var ele = this.eles[i];
                    ele.innerHTML = con;
                }
            } else { //没有参数
                // 默认返回集合中的第一个(模拟jquery)
                return this.eles[0].innerHTML;
            }
        },
        text: function (con) {
            if (arguments.length >= 1) {  // 有参数
                for (var i = 0; i < this.eles.length; i++) {
                    var ele = this.eles[i];
                    ele.textContent = con;
                }
            } else { //没有参数
                // 默认返回集合中的第一个(模拟jquery)
                return this.eles[0].textContent;
            }
        },
        val: function (con) {
            if (arguments.length >= 1) {  // 有参数
                for (var i = 0; i < this.eles.length; i++) {
                    var ele = this.eles[i];
                    ele.value = con;
                }
            } else { //没有参数
                // 默认返回集合中的第一个(模拟jquery)
                return this.eles[0].value;
            }
        }
    }

    // getEle.setHtml(45645656);
    // console.log(getEle.getHtml());

    getEle.html("123123");
    console.log(getEle.html());



    var $inp = {
        eles: document.querySelectorAll(".inp"),
        html: function (con) {
            if (arguments.length >= 1) {  // 有参数
                for (var i = 0; i < this.eles.length; i++) {
                    var ele = this.eles[i];
                    ele.innerHTML = con;
                }
            } else { //没有参数
                // 默认返回集合中的第一个(模拟jquery)
                return this.eles[0].innerHTML;
            }
        },
        text: function (con) {
            if (arguments.length >= 1) {  // 有参数
                for (var i = 0; i < this.eles.length; i++) {
                    var ele = this.eles[i];
                    ele.textContent = con;
                }
            } else { //没有参数
                // 默认返回集合中的第一个(模拟jquery)
                return this.eles[0].textContent;
            }
        },
        val: function (con) {
            if (arguments.length >= 1) {  // 有参数
                for (var i = 0; i < this.eles.length; i++) {
                    var ele = this.eles[i];
                    ele.value = con;
                }
            } else { //没有参数
                // 默认返回集合中的第一个(模拟jquery)
                return this.eles[0].value;
            }
        }
    }


    $inp.val(123123);





</script>

</html>